<template>
 <div>
  <input type="text" v-model="mytext"> <button @click="toAdd">添加</button>
  <hr>
  <div>
     <button @click="toChange('all')" :class="status=='all'?'acitve':''">全部</button>
     <button @click="toChange('done')" :class="status=='done'?'acitve':''">已完成</button>
     <button @click="toChange('no')" :class="status=='no'?'acitve':''">未完成</button>
  </div>
  <ul class="list">
    <li v-for="item in list" :key="item.id" >
      <input type="checkbox" :checked="item.isDone">
      <span :style="{'text-decoration':item.isDone?'line-through':'none'}">{{item.text}}</span>
      <div>
        <button @click="toDone(item.id)">完成</button>
        <button @click="del(item.id)">删除</button>
      </div>
  
    </li>


  </ul>
 </div>
</template>
<script setup>
  // setup语法糖写法   在script 标签中书写setup
   import {ref,reactive,computed} from 'vue'

  let mytext=ref('')//收集新任务的v-model

   let state=reactive({
    todoList:[] //列表数据
   })

// 添加新任务方法
   let toAdd=()=>{
      console.log("添加任务")


      // 像数据中添加新数据
      state.todoList.push({
            id:new Date().getTime(),
            text:mytext.value,//新任务的名字
            isDone:false
      })
      // 清空输入框的值
      mytext.value=""

   }

      //  删除
      let del=(id)=>{
           state.todoList.forEach((item,index)=>{
            // 通过id 找到 要删除的下标 
            if(item.id===id){
                 state.todoList.splice(index,1)
            }
            })
        } 
       // 点击完成按钮 修改当前数据中isDone 变为true
        let toDone=(id)=>{
          state.todoList.forEach(item=>{
            if(item.id===id){
              item.isDone=true;
            }
          })
        }

        // 设计一个状态 过滤数据
        let status=ref("all") //all (全部) done （完成） no（未完成）
        let toChange=(sta)=>{
          status.value=sta;//改变状态
        }
          //  计算属性  处理好 全部， 未完成  已完成的数据
        let list=computed(()=>{
                let arr=state.todoList.filter(item=>{
                  if(status.value==="all"){
                    return item 
                  }
                  if(status.value==="done"){ //完成的数据
                    return item.isDone
                  }
                  if(status.value==="no"){ //未完成数据
                    return !item.isDone
                  }
                })
             return arr;//计算属性 返回处理好的数据
        })
</script>
<style lang="less">
    .list{
      width: 600px;
      margin: 20px auto;
      li{
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        background: skyblue;
        margin-top: 20px;
      }
    }
    .acitve{
      background: pink;
    }
</style>